<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统-登录</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="./css/login.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/requestApi.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/jquery.md5.js"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <!--http://localhost:8057/login.html-->
    <!--http://localhost:8057/login/login.html-->
</head>
<body style="background-color: #F7F7F7">
    <div id="app">
        <div style="width:400px;height:100px;margin:0 auto;margin-top:10%;">
            <h2>图书管理系统</h2>
            <div class="df-aic">
                <span class="login-item-left">账 号：</span>
                <el-input placeholder="请输入登录账号" style="width:300px;" v-model="userName"></el-input>
            </div>
            <div class="df-aic mt-2">
                <span class="login-item-left">密 码：</span>
                <el-input placeholder="请输入密码" style="width:300px;" v-model="password" show-password></el-input>
            </div>
            <div class="df-aic mt-2">
                <span class="login-item-left" >验证码：</span>
                <el-input placeholder="请输入验证码" style="width:150px;" size="small" v-model="verificationCode" @keyup.native.enter="loginMethod"></el-input>
                <span class="img-code-text ml-2" @click.stop="changeCode">换一组</span>
                <img :src="imageCodeImgSrc" class="img-code-con ml-2"/>
            </div>
            <div class="df-aic-jcc mt-3" style="width:100%;">
                <el-button type="success" @click="loginMethod" v-loading="loginLoading">登录</el-button>
                <el-button type="info" @click="reset">重填</el-button>
            </div>

        </div>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data: {
            userName : "",
            password : "",
            verificationCode : '',
            imageCodeImgSrc : "",//验证码
            loginLoading : false,
        },
        mounted() {
            this.$nextTick(function () {
                this.changeCode();
            });
        },
        methods: {
            // 获取验证码
            changeCode () {
                this.imageCodeImgSrc = '/login/imageCode?v=' + Math.random()
            },
            //登陆的接口
            loginMethod(){
                let that = this;
                if(!that.userName){
                    that.$message.error("请填写账号");
                    return;
                }
                if(!that.password){
                    that.$message.error("请填写密码");
                    return;
                }
                if(!that.verificationCode){
                    that.$message.error("请填写图片验证码");
                    return;
                }
                if(that.verificationCode.length != 4){
                    that.$message.error("验证码不正确");
                    return;
                }
                let submitParam = {
                    "userName" : that.userName,
                    "password" : $.md5(that.password),
                    "verificationCode" : that.verificationCode,
                }
                //that.loginLoading = true;
                requestApiTB("login/doLogin",submitParam, "POST", function(res){
                    that.loginLoading = false;
                    if(res.code === 0){
                        that.$message.success("登录成功");
                        that.loginEnd(res);
                    }else{
                        that.$message.error(res.msg);
                        that.changeCode();//重新刷新验证码
                    }
                });

            },
            //重填的接口
            reset(){
                let that = this;
                that.userName = '';
                that.password = '';
                that.verificationCode = '';
                that.changeCode();
            },

             //登录成功
             loginEnd(json) {
                console.log(json);
                if (json.code == 0) {
                    localStorage.setItem("userName", json.data.userName);
                    localStorage.setItem("userToken", json.data.userToken);
                    localStorage.setItem("userId", json.data.userId);
                    window.location.href = '/menu.html';//跳转到首页

                } else {

                }
            },

        }
    })
</script>
</html>